<template>
  <div style="padding: 5px; border: 1px solid #ccc!important;">
    <async-comp></async-comp>
  </div>
</template>

<script>
  
  import {
    defineAsyncComponent,
    ref,
    reactive,
    watch,
    watchEffect,
    computed,
    shallowReactive,
    shallowReadonly,
    shallowRef,
    readonly,
    toRaw,
    isRef,
    isProxy,
    isReactive,
    isReadonly,
    toRef,
    toRefs
  } from 'vue'

  // 使用 eval编译js代码
  const mysetup = `
    (function setup () {
      {{code}}
    })
  `

</script>

<script setup>
  // 通过属性传入需要运行的代码和模板
  const props = defineProps({
    code: {
      type: Object,
      default: () => {
        return {
          js: '',
          template: '',
          style: ''
        }
      }
    }
  })

  // 用一下才行，否则不给打包
  const __a1 = ref()
  const __a2 = reactive({})
  watch (__a1, () =>{})
  watchEffect (() =>{})
  const __a14 = computed(() => {})
  const __a3 = shallowReactive(__a2)
  const __a4 = shallowReadonly(__a2)
  const __a5 = shallowRef(__a2)
  const __a6 = readonly(__a2)
  const __a7 = toRaw(__a2)
  const __a8 = isRef(__a1)
  const __a9 = isProxy(__a2)
  const __a10 = isReactive(__a2)
  const __a11 = isReadonly(__a2)
  const __a12 = toRef(__a2)
  const __a13 = toRefs(__a2)

  const code = props.code

  // 使用 defineAsyncComponent 让代码运行起来
  const AsyncComp = defineAsyncComponent(
    () => new Promise((resolve, reject) => {
        resolve({
          template: code.template, // 设置模板
          style: [code.style], // 大概是样式设置，但是好像没啥效果
          setup() {
            const tmpJs = code.js // 获取js代码
            let fun = null // 转换后的函数
            try {
              if (tmpJs)
                fun = eval(mysetup.replace('{{code}}', tmpJs)) // 用 eval 把 字符串 变成 函数
            } catch (error) {
              console.error('转换出现异常：', error)
            }

            const re = typeof fun === 'function' ? fun : () => {}

            return {
              ...re() // 运行函数，解构返回对象
            }
          }
        })
      })
  )

</script>